<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 400px;
        height: 400px;
        background-color: aqua;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box">box</div>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
  <script>
    var oBox = document.getElementsByClassName("box")[0];
    var father = document.getElementsByClassName("father")[0];
    var son = document.getElementsByClassName("son")[0];
    // onclick：单击事件
    oBox.onclick = function () {
      console.log("这是单击事件");
    };
    // ​ondblclick：双击事件
    var flag = 0; //设置一个标识位，实现双击字体变大，再双击字体变小
    oBox.ondblclick = function () {
      console.log("这是双击事件");
      if (flag === 0) {
        this.style.fontSize = "20px";
        flag = 1;
      } else {
        this.style.fontSize = "14px";
        flag = 0;
      }
    };
    // ​onmousedown：按下鼠标键
    oBox.onmousedown = function () {
      console.log("这是mousedown");
    };
    // ​onmouseup：松开鼠标键
    oBox.onmouseup = function () {
      console.log("这是mouseup");
    };
    // ​onmousemove：移动鼠标键
    document.body.onmousemove = function (e) {
      //console.log(e.clientX,e.clientY);//获取鼠标移动到该点的横纵坐标
    };
    // ​onmouseover：鼠标移入（经过）（会触发冒泡事件）
    //如果多个元素之间是一个包含的关系，并且绑定同一个事件,移到子元素时父元素绑定的事件也会触发，它是由子元素向父元素触发，这种情况称为事件冒泡
    //即子元素会先执行自己绑定的事件，然后再执行父节点绑定的事件
    father.onmouseover = function () {
      console.log("father------mouseover");
    };
    son.onmouseover = function () {
      console.log("son-----mouseover");
    };
    // ​onmouseout：鼠标离开（会触发冒泡事件）
    father.onmouseout = function () {
      console.log("father------mouseout");
    };
    son.onmouseout = function () {
      console.log("son-----mouseout");
    };
    // ​onmouseenter：鼠标移入（不会触发冒泡事件）
    //只执行自身绑定的事件，不会继续执行父节点绑定的事件
    father.onmouseenter = function () {
      console.log("----father------mouseenter");
    };
    son.onmouseenter = function () {
      console.log("----son-----mouseenter");
    };
    // ​onmouseleave：鼠标离开（不会触发冒泡事件）
    father.onmouseleave = function () {
      console.log("----father------mouseleave");
    };
    son.onmouseleave = function () {
      console.log("----son-----mouseleave");
    };

  </script>
</html>
